<template>
	<view class="container">
		<view class="header">
			<view class="search">
				<view class="input">
					<uni-icons type="search" color="#CECED9" size="22" @click="handleSearch"></uni-icons>
					<input type="text" placeholder="茶桌实木" confirm-type="search" v-model="searchValue" @blur="handleSearch">
				</view>
				
			</view>
			<view class="search-right">
				<uni-icons type="cart" color="#333" size="22"></uni-icons>
				<uni-icons type="list" color="#333" size="22"></uni-icons>
				<uni-icons type="more-filled" color="#333" size="22"></uni-icons>
			</view>
		</view>
		<view class="wrapper">
			<view class="category-list">
				<view class="category-item" v-for="(item, index) of category" :key="index" @click="handleItem">
					<image :src="item.img" mode="widthfix"></image>
					<view class="label">{{ item.label }}</view>
				</view>
			</view>
			<view class="main">
				<view class="products-list">
					<view class="products-item" v-for="(item, index) of products" :key="index" @click="handleItem">
						<view class="image">
							<image :src="item.image" mode=""></image>
							<image class="icon-play play-bg" src="../../static/images/ysmMall/play-1.png" mode="widthFix"></image>
							<image class="icon-play play-triangle" src="../../static/images/ysmMall/play-2.png" mode="widthFix"></image>
						
						</view>
						<view class="info">
							<view class="price text-price">{{ item.price }}</view>
							<view class="extra">{{ item.comments }}+条评价</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
export default {
	name: 'YsmMall',
	components: {
	},
	onShow() {
		uni.hideTabBar()
	},
	data() {
		return {
			navBarHeight: 44,
			windowWidth: 0,
			// src: '../../static/images/ysmMall/banner.png',
			src: 'https://www.ysmll.cn/imgs/shop.png',
			searchValue: '',
			NavCur: 0,

			category: [
				{
					img: '../../static/images/ysmMall/c-1.png',
					label: '沙发',
				},
				{
					img: '../../static/images/ysmMall/c-2.png',
					label: '床垫',
				},
				{
					img: '../../static/images/ysmMall/c-3.png',
					label: '衣柜',
				},
				{
					img: '../../static/images/ysmMall/c-4.png',
					label: '儿童',
				},
				{
					img: '../../static/images/ysmMall/c-5.png',
					label: '窗帘和卷帘',
				},
				{
					img: '../../static/images/ysmMall/c-6.png',
					label: '卧室纺织品',
				},
				{
					img: '../../static/images/ysmMall/c-7.png',
					label: '床',
				},
				{
					img: '../../static/images/ysmMall/c-8.png',
					label: '婴儿',
				},
				{
					img: '../../static/images/ysmMall/c-9.png',
					label: '浴室家具',
				},
				{
					img: '../../static/images/ysmMall/c-10.png',
					label: '家居组合',
				},
			],
			products: [
				{
					id: 1,
					image: 'https://www.ysmll.cn/imgs/goods-2.png',
					label: '热卖',
					subLabel: '会员价',
					title: 'LENNART',
					subTitle: '抽屉柜',
					price: '499',
					originPrice: '2068',
					comments: 200,
				},
				{
					id: 2,
					image: 'https://www.ysmll.cn/imgs/goods-1.png',
					label: '热卖',
					subLabel: '会员价',
					title: 'LENNART',
					subTitle: '抽屉柜',
					price: '1999.8',
					originPrice: '2068',
					comments: 300,
				},
				{
					id: 3,
					image: 'https://www.ysmll.cn/imgs/goods-3.png',
					label: '热卖',
					subLabel: '会员价',
					title: 'LENNART',
					subTitle: '抽屉柜',
					price: '499',
					originPrice: '2068',
					comments: 140,
				},
				{
					id: 4,
					image: 'https://www.ysmll.cn/imgs/goods-4.png',
					label: '热卖',
					subLabel: '会员价',
					title: 'LENNART',
					subTitle: '抽屉柜',
					price: '599',
					originPrice: '2068',
					comments: 340,
				},
			]
		};
	},
	methods: {
		computedSize() {
			// #ifndef H5 || APP-PLUS || MP-ALIPAY
			// 获取胶囊位置,API getMenuButtonBoundingClientRect 只有在微信小程序运行的时候才会生效，H5端查看会报错
			const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			this.navBarHeight = menuButtonInfo.top + menuButtonInfo.height + 8;
			this.top = menuButtonInfo.top + (menuButtonInfo.height - 32) / 2;
			this.windowWidth = menuButtonInfo.left
			// #endif

			// #ifdef H5 || APP-PLUS || MP-ALIPAY
			this.navBarHeight = 44
			this.windowWidth = 0
			// #endif
		},
		handleSearch() {
			console.log('searchValue', this.searchValue);
		},
		// 弹框：展示此功能正在紧急开发中
		handleItem() {
			uni.showModal({
				title: '提示',
				content: '此功能正在紧急开发中，敬请期待！',
				showCancel: false,
				success: function (res) {
					if (res.confirm) {
						console.log('用户点击确定');
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		},
	},
}
</script>

<style lang="less">
page {
	background-color: #FAFAFA;
}
.header {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9;
	width: 100%;
	background-color: #fff;
	padding: 20rpx;
	display: flex;
	align-items: center;
	.search {
		display: flex;
		align-items: center;
		background: #F6F7FB;
		border-radius: 80rpx;
		height: 60rpx;
		padding: 0 32rpx;
		width: 70%;

		.input {
			font-weight: 400;
			font-size: 24rpx !important;
			color: #333333;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	}
	.search-right {
		margin-left: 5%;
		width: 25%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
}

.wrapper {
	padding-top: 100rpx;
}
.category-list {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-gap: 20rpx;
	padding: 30rpx;
	background-color: #fff;
	.category-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		image {
			width: 80rpx;
			height: 80rpx;
			margin-bottom: 10rpx;
		}
		.label {
			font-size: 24rpx;
			color: #333333;
		}
	}
}

.products-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 30rpx 16rpx;
	.products-item {
		background-color: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 49%;
		margin-bottom: 20rpx;
		.image {
			position: relative;
			// width: 100%;
			width: 360rpx;
			height: 360rpx;
		}
		.icon-play {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 80rpx;
			height: 80rpx;
		}
		image {
			width: 360rpx;
			height: 360rpx;
			overflow: hidden;
		}
		
		.play-bg {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 88rpx;
			height: 88rpx;
		}
		.play-triangle {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 28rpx;
			height: 28rpx;
		}

		.info {
			display: flex;
			width: 100%;
			justify-content: space-between;
			align-items: center;
			line-height: 80rpx;
			padding: 0 10rpx;

			.text-price::before {
				font-weight: 400;
				font-size: 22rpx;
			}
			.price {
				font-weight: 700;
				font-size: 40rpx;
				color: #FD5803;
			}
			.extra {
				font-size: 24rpx;
				color: #999999;
			}
		}
	}
}
</style>
